@import (reference) "./../../shared/common";
@import (reference) "./../../shared/constants";
@import (reference) "./../../shared/color";
:host {
  &,
  .stock-chart-container {
    .display-flex;
    .flex;
    .full-height;
  }
}

.nine-chart {
  width: 100%;
  .flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  background-color: @color-gray-main;
  position: absolute;
  .nine-chart-wrap {
    position: relative;
    width: calc(~"26%");
    // width: calc(~"33%");
    height: calc(~"33%");
    padding: 10px 0px 0px 0px;
    // padding-left: 0;
    background-color: @color-white;
    margin: 1px;
    flex-grow: 1;
    // .display-flex(row);
    .chart-title {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      padding: 2px 0;
      width: 2.8em;
      color: @color-white;
      text-align: center;
      font-size: 1.4rem;
      font-weight: lighter;
      border-radius: 2px;
      background-color: rgba(0, 0, 0, .3);
      cursor: default;
      .transition(opacity, 50ms);
      &:hover {
        opacity: .3;
      }
    }
    .chart-main {
      height: 100%;
      .display-flex;
      .flex;
      // .flex;
      // .flex-shrink(1);
      // height: calc(~"100% - 14px");
    }
  }
}

.kchart-container {
  // padding: 0 10px 10px 10px;
}

.chart-container {
  .full-height;
  background-color: @color-white;
  height: calc(~"100% - 24px - "@space-common);
  .k-chart {
    .full-height;
  }
}

quote-chart {
  background-color: @color-white;
}

.chart-switcher-container {
  margin-left: @space-common;
  font-size: 1.4rem;
}

.kchart-switcher {
  margin-top: @space-common / 2;
  height: 24px;
  display: inline-block;
}